/**
 * Created by zzc on 2017/11/20
 */

'use strict'

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

import {deviceWidth} from '../../base/util/ScreenUtil'

let cols = 3;
let boxW = deviceWidth/cols;

const shareData = {
    "data": [
    {
        "icon": require("../../resource/images/icon_minefragment_activity.png"),
        "title": "活动管理"
    },
    {
        "icon": require("../../resource/images/icon_minefragment_invitation.png"),
        "title": "邀请好友"
    },
    {
        "icon": require("../../resource/images/icon_minefragment_security.png"),
        "title": "账号安全"
    },
    {
        "icon": require("../../resource/images/icon_minefragment_help.png"),
        "title": "帮助反馈"
    },
    {
        "icon": require("../../resource/images/icon_minefragment_setting.png"),
        "title": "我的设置"
    }
]
}


export default class MineManageContent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                {this._renderAllBadge()}
            </View>
        );
    }

    _renderAllBadge(){
        let  allData = [];
        for (var i = 0;i<shareData.data.length;i++){
            let badge =shareData.data[i];
            allData.push(
                <TouchableOpacity key = {i} activeOpacity={0.8} onPress={()=>{this._onPress(i,badge.title)}} >
                <View key={i} style={styles.outViewS}>
                    <Image source={badge.icon} style={styles.imageStyle}></Image>
                    <Text style={styles.titleName}>{badge.title}</Text>
                </View>
                </TouchableOpacity>
            );
        }
        return allData;
    }

    _onPress(e,title) {

        alert(">>>点击 " + e +" "+title);
    }
}

//设置样式

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row', //设置主轴方向
        flexWrap: 'wrap', //超出换行
        backgroundColor: 'white',
        width: deviceWidth,  //宽度等于屏幕宽度
    },
    outViewS: {
        alignItems: 'center',   //交叉轴的对齐方式
        width: boxW,
        padding:10
    },
    imageStyle: {
        width: 30,
        height: 30
    },
    titleName: {
        color:'black',
        fontSize:13,
        marginTop:10
    }
});